<script>
import axios from "axios";
import ModifyEmail from "@/components/dialog/ModifyEmail.vue";

export default {
  name: "ModifyData",
  components: {ModifyEmail},
  props: ["modify_data"],
  data() {
    return {
      user: {
        nickname: "",
        avatar: "",
        gender: "",
        signature: ""
      },
      avatar_file: new File([], "", undefined),
      loading:false,
      modify_email:false
    }
  },
  methods: {
    showEditAvatar(e, f) {
      let div = e.target.lastChild
      if (f) {
        div.style.display = 'flex'
      } else {
        div.style.display = 'none'
      }
    },
    selectAvatarFile(e) {
      e.target.parentNode.parentNode.firstChild.click()
    },
    modifyAvatar(e) {
      let fil = e.target.files
      this.avatar_file = fil[0]
      if (fil[0])
        this.user.avatar = URL.createObjectURL(fil[0])
    },
    updateInfo() {
      let form = new FormData()
      form.append("id",this.user.id)
      form.append("nickname",this.user.nickname)
      form.append("gender",this.user.gender)
      form.append("signature",this.user.signature)
      form.append("avatarFile",this.avatar_file)
      this.loading = true
      axios.post("/api/user/update",form)
          .then(resp => {
            this.loading = false
            if (resp.data.code === 0) {
              this.$message.success(resp.data.msg)
              let user = resp.data.data
              user.avatar = '/api/res/'+user.avatar
              this.$store.commit('setUser',user)
            } else {
              this.$message.warning(resp.data.msg)
            }
          }).catch(err => this.$message.error(err))

    },
    closeModifyEmail(){
      this.modify_email = false
    }
  },
  mounted() {
    Object.assign(this.user,this.$store.state.user)
  }
}
</script>

<template>
  <div class="md_box" v-loading="loading">
    <el-dialog :visible.sync="modify_email" title="修改邮箱" top="18vh" width="25%" append-to-body destroy-on-close>
      <modify-email @closeModifyEmail="closeModifyEmail"></modify-email>
    </el-dialog>
    <div class="md_avatar" @mouseenter="showEditAvatar($event,true)" @mouseleave="showEditAvatar($event,false)">
      <input type="file" style="display: none" @change="modifyAvatar" accept=".jpg,.jpeg,.png">
      <el-avatar id="md_img" alt="" :src="user.avatar"></el-avatar>
      <div class="mask">
        <i class="el-icon-edit-outline" @click="selectAvatarFile"></i>
      </div>
    </div>
    <div class="md_cont">
      <div class="md_text">昵称</div>
      <div style="width: 240px;">
        <el-input v-model="user.nickname" maxlength="10"></el-input>
      </div>
    </div>
    <div class="md_cont">
      <div class="md_text">性别</div>
      <div style="width: 100px">
        <el-select v-model="user.gender" placeholder="请选择">
          <el-option value="男">男</el-option>
          <el-option value="女">女</el-option>
        </el-select>
      </div>
    </div>
    <div class="md_cont">
      <div class="md_text">邮箱</div>
      <div class="md_email">
        {{ $store.state.user.email }}
        <a @click="modify_email=true">更换</a>
      </div>
    </div>
    <div class="md_cont">
      <div class="md_text">签名</div>
      <div style="width: 240px">
        <el-input
            type="textarea"
            resize="none"
            v-model="user.signature"
            placeholder=""
            maxlength="25"
            :rows="3"></el-input>
      </div>
    </div>
    <div class="md_btn_box">
      <button class="md_btn" @click="updateInfo">保 存</button>
    </div>
  </div>
</template>

<style scoped>
.md_box {
  margin: 0 auto;
  width: 95%;
}


.md_avatar {
  position: relative;
  margin: 0 auto;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #cdcdcd;

  .el-avatar {
    height: 90px;
    width: 90px;
  }
}

.md_avatar .mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  align-items: center;
}

.md_avatar .mask i {
  margin: 0 auto;
  font-size: 30px;
  color: #409EFF;
}

.md_cont {
  font-size: 17px;
  font-weight: bold;
  color: #8a8a8a;
  width: 360px;
  margin: 20px auto;
  display: flex;
}

.md_text {
  width: 60px;
  line-height: 40px;
  margin-right: 20px;
  text-align: justify;
  text-align-last: justify;
}

.md_email {
  line-height: 40px;
  color: #222327;
}

.md_email a {
  text-decoration: underline;
  color: #409EFF;
}

.md_btn_box {
  margin: 0 auto;
  height: 50px;
  width: 100px;
  padding-top: 20px;
}

.md_btn {
  height: 50px;
  width: 100px;
  font-size: 18px;
  font-weight: bold;
  background-color: #409EFF;
  color: #ffffff;
  cursor: pointer;
  border: none;
  border-radius: 15px;
}
</style>